<template>
  <div class="app-container">
    <el-row style="padding: 20px;background-color: #fff">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        element-loading-text="Loading"
        border
        row-key="id"
        fit
        highlight-current-row
        :data="tableData"
        style="width:100%"
        :header-cell-style="styleObject"
        :render-header="renderHeader"
        :span-method="objectSpanMethod"
      >
        <el-table-column prop="time" label="时间" width="50" align="center" />
        <el-table-column label="星期" width="80" align="center">
          <el-table-column
            prop="name"
            label="教室"
            align="center"
          >
            <template slot-scope="scope">
              <span class="text-item">{{ scope.row.meetingRoom }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="province"
          label="周一"
          :render-header="renderHeader"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.classes | returnName(1,scope.row) }}</span>
            <!--<span v-for="(item,index) in scope.row.classes[]" :key="index">{{ item }}</span>-->
          </template>
        </el-table-column>
        <el-table-column
          prop="city"
          label="周二"
          :render-header="renderHeader"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.classes | returnName(2,scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="周三"
          :render-header="renderHeader"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.classes | returnName(3,scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="zip"
          label="周四"
          :render-header="renderHeader"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.classes | returnName(4,scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="zip"
          label="周五"
          :render-header="renderHeader"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.classes | returnName(5,scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  filters: {
    returnName(data, index, row) {
      return data[index - 1]
    }
  },
  data() {
    return {
      listLoading: false,
      tableKey: 0,
      tableData: [],
      currWeek: '',
      currDate: '',
      spanObj: [],
      dateList: []
    }
  },
  mounted() {
    // 当前天数据高亮
    this.currDate = '2021-12-21' // this.getDateBy()
    const data = {
      amList: [
        {
          time: '上午',
          classes: ['cisco交换机', 'cisco路由器', '网络安全', '高数', '绘画基础'],
          meetingRoom: '信息楼202'
        },
        {
          time: '上午',
          classes: ['逻辑思维', '', '网络安全', '', 'Linux入门'],
          meetingRoom: '信息楼301'
        },
        {
          time: '上午',
          classes: ['', '大学英语', '', '', 'Linux入门'],
          meetingRoom: '人文馆102'
        },
        {
          time: '上午',
          classes: ['', '商务谈判', '网络布线', '', 'Linux入门'],
          meetingRoom: '人文馆302'
        },
        {
          time: '上午',
          classes: ['', '', '逻辑思维', '', '网络布线'],
          meetingRoom: '人文馆402'
        }
      ],
      dataList: [
        '2021-12-20',
        '2021-12-21',
        '2021-12-22',
        '2021-12-23',
        '2021-12-24'
      ],
      pmList: [
        {
          time: '下午',
          classes: ['PS入门', '网络布线', '', 'Linux入门', 'window server'],
          meetingRoom: '信息楼202'
        },
        {
          time: '下午',
          classes: ['html入门', '', '网页布局', '', 'Linux入门'],
          meetingRoom: '信息楼301'
        },
        {
          time: '下午',
          classes: ['', 'MySQL数据库', '网页布局', '', '电影鉴赏'],
          meetingRoom: '人文馆102'
        },
        {
          time: '下午',
          classes: ['', '', '绘画基础', '网络布线', ''],
          meetingRoom: '人文馆302'
        },
        {
          time: '下午',
          classes: ['逻辑思维', '', '网络安全', '绘画基础', ''],
          meetingRoom: '人文馆4022'
        }
      ]
    }
    this.initData(data)
  },
  methods: {
    getDateBy(data) {
      let date = new Date()
      if (date) {
        date = new Date(data)
      }

      let m = date.getMonth() + 1
      m = m > 9 ? m : '0' + m

      let d = date.getDate()
      d = d > 9 ? d : '0' + d

      return date.getFullYear() + '-' + m + '-' + d
    },
    // 高亮当前日期
    styleObject({ row, column, rowIndex, columnIndex }) {
      if (this.currWeek && columnIndex !== this.currWeek) {
        return {
          backgroundColor: '#fff'
        }
      } else {
        if (this.currWeek) {
          return {
            backgroundColor: 'rgb(207,232,252)'// "#ecf5ff"
          }
        } else {
          return {
            backgroundColor: '#fff'
          }
        }
      }
    },
    // 处理数据
    initData(data) {
      this.currWeek = ''
      if (data.amList && data.amList.length > 0) {
        data.dataList.forEach((item, index) => {
          this.dateList[index + 2] = item
          if (item === this.currDate) {
            this.currWeek = index + 2
          }
        })
        // data.amList.forEach(item => item['time'] = '上午')
      }
      this.tableData = data.amList.concat(data.pmList)

      this.handleSpan()
    },
    // 格式化table数据
    handleSpan() {
      this.spanObj['time'] = []
      let position = 0
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanObj['time'].push(1)
          position = 0
        } else {
          if (this.tableData[index]['time'] === this.tableData[index - 1]['time']) {
            this.spanObj['time'][position] += 1
            this.spanObj['time'].push(0)
          } else {
            this.spanObj['time'].push(1)
            position = index
          }
        }
      })
    },
    // 初始化表头样式
    renderHeader(h, { column, $index }) {
      const date = this.dateList[$index]
      return h('div', [
        h('span', {
          domProps: {
            innerHTML: '<span>' + column.label + '</span>'
          },
          style: {
            display: 'block',
            lineHeight: '20px',
            marginTop: '8px'
          }
        }),
        h('span', {
          domProps: {
            innerHTML: '<div class="h-item">' + date + '</div>'
          },
          style: {
            display: 'block',
            lineHeight: '20px'
          }
        })
      ])
    },
    // 初始化table样式
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (column.property === 'time') {
          const _row = this.spanObj['time'][rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    }
  }
}
</script>
<style>
  .tabletitle-timeline{
    line-height: 18px!important;
  }
</style>
